import 'package:flutter/material.dart';
import 'package:pp_uikit/theme/pp_default_theme.dart';

class PPMultiSelectSheet extends StatefulWidget {
  final String title;

  /// 选择列表
  final List<String> items;

  /// 确认回调
  final Function(List<int>)? confirmFun;

  const PPMultiSelectSheet(
      {Key? key, required this.title, required this.items, this.confirmFun})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _PPMultiSelectSheet();
  }
}

class _PPMultiSelectSheet extends State<PPMultiSelectSheet> {
  final _saved = <int>{};

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Container(
        height: 250,
        decoration: const ShapeDecoration(
          color: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(12), topRight: Radius.circular(12)),
          ),
        ),
        child: Column(
          children: <Widget>[
            //头部布局
            Container(
                padding: const EdgeInsets.only(left: 14, right: 14),
                height: 48,
                decoration: const BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: PPDefaultTheme.lineColor,
                      width: 0.5,
                    ),
                  ),
                ),
                child: Stack(children: <Widget>[
                  Align(
                    alignment: Alignment.center,
                    child: Text(
                      widget.title,
                      style: TextStyle(
                        color: PPDefaultTheme.instance.colorTextBase,
                        fontWeight: FontWeight.bold,
                        fontSize: 18,
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      //确认按钮点击事件
                      if (_saved.isNotEmpty && widget.confirmFun != null) {
                        Navigator.pop(context);
                        widget.confirmFun!(_saved.toList());
                      }
                    },
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: Text(
                        "确认",
                        style: TextStyle(
                          color: PPDefaultTheme.instance.brandPrimary,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ),
                ])),

            //列表布局
            Expanded(
              flex: 1,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: widget.items.length,
                itemBuilder: (context, index) {
                  return _itemView(index);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  //多选列表布局
  Widget _itemView(int index) {
    final alreadySaved = _saved.contains(index);
    return GestureDetector(
      child: Container(
        height: 44,
        decoration: const BoxDecoration(
          border: Border(
              bottom: BorderSide(color: PPDefaultTheme.lineColor, width: 0.5)),
        ),
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.only(left: 14.0),
                child: Text(
                  widget.items[index],
                  style: TextStyle(
                    fontSize: 16,
                    color: PPDefaultTheme.instance.colorTextBase,
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.centerRight,
              child: Checkbox(
                activeColor: PPDefaultTheme.instance.brandPrimary,
                value: alreadySaved,
                onChanged: (bool? value) {
                  setState(() {
                    if (alreadySaved) {
                      _saved.remove(index);
                    } else {
                      _saved.add(index);
                    }
                  });
                },
              ),
            ),
          ],
        ),
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(index);
          } else {
            _saved.add(index);
          }
        });
      },
    );
  }
}
